<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<jsp:include page="/WEB-INF/jsp/lib.jsp" />
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery.ztree.all.min.js"></script>
<br>
<!-- 查询角色 -->
角色：<input id="role" />&nbsp;
<button id="btn">搜索</button><br><br>
<table id="dg"></table>
<div class="zTreeDemoBackground left" id="dlgs">
	<ul id="treeDemo" class="ztree"></ul>
</div>
<!-- 对话框 -->
<div id="dlg">
	<form id="ff">
		<input type="hidden" name="id">
		角&nbsp;&nbsp;色：<input name="name"><br>
		Code：<input name="code"><br>
		描&nbsp;&nbsp;述：<input name="description">
	</form>
</div>
<!-- js处理数据 -->
<script type="text/javascript">

    $("#dlgs").dialog({
    	//关闭状态
    	closed:true,
    	//开启模态
    	modal:true,
    	buttons:[{
    		iconCls:"icon-save",
    		text:"保存",
    		handler:function(){
    			//获取被选中的角色
				var row = $("#dg").datagrid("getSelected");
    			//获取权限树
				var treeObj =  $.fn.zTree.getZTreeObj("treeDemo");
				//获取选中的节点
				var nodes = treeObj.getCheckedNodes(true);
				//提示权限id
				var fids = []
				$(nodes).each(function(){
					fids.push(this.id)
				})
				str = fids.toLocaleString()
				$.ajax({
					url:"role/updateFuns.do",
					data:{rid:row.id,fids:str},
					success:function(){
						$("#dlgs").dialog("close")
					}
				})
    		}
    	}]
    })
    
    	//配置js对象
	var setting = {
		view : {
			//是否开启多选
			selectedMulti : false
		},
		check : {
			//设置是否显示checkbox复选框
			enable : true
		},
		data : {
			simpleData : {
				//开启简单数据支持
				enable:true,
				//制定节点数据的id和父id
				idKey:'id',
				pIdkey:'pId',
				rootPid:null
			},
			keep:{
				leaf:true,
				parent:true
			}
		},
		edit : {
			//开启节点编辑模式
			enable:false,
		}
	}
    
	//初始化表格
	$(function(){
		var url
		//初始化对话框
		$("#dlg").dialog({
			width:230,
			height:150,
			//默认对话框是关闭的
			closed:true,
			buttons:[{
				text:"保存",
				//图标样式
				iconCls:"icon-save",
				handler:function(){
					//获取表单参数
					var params = $("#ff").serialize();
					//提交表单
					$.ajax({
						url:url,
						data:params,
						//指定返回数据的格式
						dataType:"json",
						//data是响应的数据 data结构
						success:function(data){
							//保存成功
							$.messager.alert("提示","保存成功","info",function(){
								//关闭对话框
								$("#dlg").dialog("close")
								//刷新表格
								$("#dg").datagrid("reload")
							})
						}
					})
				}
			},{
				text:"取消",
				iconCls:"icon-cancel",
				handler:function(){
					//关闭对话框
					$("#dlg").dialog("close");
				}
			}]
		})
		
		//带参数刷新表格
		$("#btn").click(function(){
			$("#dg").datagrid({
				queryParams:{
					name:$("#role").val()
				}
			});
		})
		
		//初始化表
		$("#dg").datagrid({
			//自适应列宽
			fitColumns:true,
			//加载数据
			url:"role/list.do",
			//列表栏
			columns:[[{
				//field的值是json数据的key
				field:'id',
				//显示的列标题
				title:'ID',
				//列的宽度
				width:100
			},{
				field:'name',
				title:'角色',
				width:100
			},{
				field:'code',
				title:'Code',
				width:100
			},{
				field:'description',
				title:'描述',
				width:100
			}]],
			//开启分页
			pagination:true,
			//开启单选
			singleSelect:true,
			//定义工具栏
			toolbar:[{
				text:"增加",
				iconCls:"icon-add",
				handler:function(){
					$("#ff").form("clear");
					//打开对话框
					$("#dlg").dialog("open");
					//修改对话框标题
					$("#dlg").dialog("setTitle","增加角色");
					url="role/save.do";
				}
			},"-",{
				text:"修改",
				iconCls:"icon-edit",
				handler:function(){
					//获取选中的数据
					var row = $("#dg").datagrid("getSelected");
					if(row){
						$("#dlg").dialog("open");
						$("#dlg").dialog("setTitle","修改角色");
						//清除表单残留内容
						$("#ff").form("clear");
						//将选择的数据回显表单
						$("#ff").form("load",row);
						//处理id的回填数据
						$("input[name=id]").val(row.id);
						url="role/update.do";
					}else{
						//没有选中数据就提示用户选择数据行
						$.messager.alert("提示","请先选中一行数据","info")
					}
				}
			},"-",{
				text:"删除",
				iconCls:"icon-remove",
				handler:function(){
					var row = $("#dg").datagrid("getSelected")
					if(row){
						$.messager.confirm('确认对话框', '您想删除【'+row.name+'】吗？',function(shi){
							if(shi){
								$.ajax({
									url:"role/delete.do",
									data:{id:row.id},
									success:function(){
										$("#dg").datagrid("reload")
									}
								})
							}
						})
					}else{
						$.messager.alert("提示","请先选中一行数据","info")
					}
				}
			},"-",{
				text:"编辑权限",
				iconCls:"icon-edit",
				handler:function(){
					//获取被选中的角色
					var row = $("#dg").datagrid("getSelected");
					if(row){
						//打开权限树对话框
						$("#dlgs").dialog("open");
						$("#dlgs").dialog("setTitle","编辑权限");
						//初始化权限树
						$.ajax({
							url:"function/getByRId.do?rid="+row.id,
							success:function(data){
								$(data.rows).each(function(){
									this.isParent==1?this.isParent=true:this.isParent=false
								})
								$.fn.zTree.init($("#treeDemo"),setting,data.rows);
							}		
						})
					}
				}
			}]
		})
	})
</script>